<template>
  <div class="layout">
        <Header class="layout-header-bar"></Header>
        <Row>
          <div style="width: 120px;height: 520px;background:white;margin: 20px 10px;text-align: center">
            <Menu style="width: 120px;">
                <MenuItem name="1" :to="{path: '/sp-basics/driver_info/info_1',query:{id: id}}">基本信息</MenuItem>
              <hr>
                <MenuItem name="2" :to="{path: '/sp-basics/driver_info/info_2',query:{id: id}}">驾驶证信息</MenuItem>
              <hr>
                <MenuItem name="3" :to="{path: '/sp-basics/driver_info/info_3',query:{id: id}}">车辆信息</MenuItem>
              <hr>

            </Menu>
            <Button style="margin-top: 280px;width: 80px" type="error" to="/sp-basics/sp-basics-driver">返回</Button>
          </div>
          <Content :style="{margin: '20px 10px', background: '#fff', minHeight: '520px'}">
            <router-view />
          </Content>
        </Row>
  </div>
</template>

<script>
    export default {
      data(){
        return{
          id: this.$route.query.id
        }
      },
      created() {
      }
    }
</script>

<style scoped>
.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-top: -20px;
}
.layout-header-bar{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

</style>
